<template>
  <main class="dashboard-home" role="main">
    <!-- SEO优化的页面标题和描述 -->
    <div class="page-header sr-only">
      <h1>数知笔记 - 专业技术博客首页</h1>
      <p>探索最新的技术文章、编程教程和开发经验分享。涵盖前端开发、后端开发、数据分析等多个技术领域。</p>
    </div>
    
    <!-- 主要内容区域 -->
    <section class="content-section" aria-label="最新文章列表">
      <sg-article-list />
    </section>
  </main>
</template>

<script lang="ts" setup>
import { onMounted } from "vue";
import SgArticleList from "@/views/components/SgArticleList/index.vue";
import { setSEO, setOrganizationStructuredData } from "@/utils/seo";

// 设置首页SEO
onMounted(() => {
  setSEO({
    title: "首页",
    description: "数知笔记首页 - 探索最新的技术文章、编程教程和开发经验分享。涵盖前端开发、后端开发、数据分析等多个技术领域。",
    keywords: "技术博客,首页,编程教程,前端开发,后端开发,数据分析,软件开发,Vue.js,JavaScript",
    canonicalUrl: window.location.origin + "/",
  });
  
  // 设置组织结构化数据
  setOrganizationStructuredData();
});
</script>

<style lang="scss" scoped>
.dashboard-home {
  min-height: 100vh;
  background: linear-gradient(
    to bottom,
    rgba(249, 250, 251, 0.8),
    rgba(243, 244, 246, 0.9)
  );
}

.page-header {
  h1 {
    font-size: 2rem;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 0.5rem;
  }
  
  p {
    font-size: 1.125rem;
    color: #6b7280;
    line-height: 1.6;
  }
}

.content-section {
  width: 100%;
  max-width: 100%;
}

// 辅助功能 - 屏幕阅读器可见但视觉隐藏
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

// 响应式设计
@media (max-width: 768px) {
  .dashboard-home {
    background: linear-gradient(
      to bottom,
      rgba(249, 250, 251, 1),
      rgba(243, 244, 246, 1)
    );
  }
}

// 深色模式适配
@media (prefers-color-scheme: dark) {
  .dashboard-home {
    background: linear-gradient(
      to bottom,
      rgba(17, 24, 39, 0.8),
      rgba(31, 41, 55, 0.9)
    );
  }
  
  .page-header {
    h1 {
      color: #f9fafb;
    }
    
    p {
      color: #d1d5db;
    }
  }
}

// 高对比度模式
@media (prefers-contrast: high) {
  .dashboard-home {
    background: #ffffff;
  }
  
  .page-header {
    h1 {
      color: #000000;
    }
    
    p {
      color: #333333;
    }
  }
}
</style>
